<template>
  <a-card
    class="general-card"
    title="公告"
    :header-style="{ paddingBottom: '0' }"
    :body-style="{ padding: '15px 20px 13px 20px' }"
  >
<!--    <template #extra>-->
<!--      <a-link @click="router.replace({ path: '/system/notice' })">更多</a-link>-->
<!--    </template>-->
    <a-skeleton v-if="loading" :loading="loading" :animation="true">
      <a-skeleton-line :rows="5" />
    </a-skeleton>
    <div v-else>
      <a-empty v-if="dataList.length === 0">暂无公告</a-empty>
      <div v-else>
        <div v-for="(item, idx) in dataList" :key="idx" class="item">
                <a-tag v-if="!item.noticeType" error></a-tag>
                <a-tag v-else-if="item.noticeType === '1'" color="arcoblue">通知</a-tag>
                <a-tag v-else-if="item.noticeType === '2'" color="green">活动</a-tag>
            <a-link class="item-content" @click="onDetail(item.noticeId)">
                <a-typography-paragraph
                    :ellipsis="{
                rows: 1,
                showTooltip: true,
                css: true,
              }"
                >
                    {{ item.noticeTitle }}
                </a-typography-paragraph>
            </a-link>
        </div>
      </div>
    </div>
  </a-card>
  <NoticeDetailModal ref="NoticeDetailModalRef" />
</template>

<script setup lang="ts">
import type * as T from '@/apis/system/type'
import { lists } from '@/apis/system/notice'
import NoticeDetailModal from '@/views/system/notice/NoticeDetailModal.vue'
const router = useRouter()
const dataList = ref<T.NoticeResp[]>([])
const loading = ref(false)
// 查询列表数据
const getDataList = async () => {
  try {
    loading.value = true
    const res = await lists()
    dataList.value = res.data
  } finally {
    loading.value = false
  }
}

const NoticeDetailModalRef = ref<InstanceType<typeof NoticeDetailModal>>()
// 详情
const onDetail = (id: string) => {
  NoticeDetailModalRef.value?.onDetail(id)
}

onMounted(() => {
  getDataList()
})
</script>

<style scoped lang="less">
:deep(.arco-typography) {
  color: var(--color-text-2);
}

.item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  margin-bottom: 4px;
  .item-content {
    flex: 1;
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 4px;
    color: var(--color-text-2);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
  }
}
</style>
